.container {
      max-width: 800px;
      margin: 30px auto;
      border-radius: 4px;
      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
      padding: 16px;
    }

    .carousel {
      position: relative;
      height: 200px;
    }

    .carousel .panels > a {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-decoration: none;
      opacity: 0;
      z-index: 0;
      transition: all .3s;
    }

    .carousel .panels > a.active {
      opacity: 1;
      z-index: 1;
    }

    .carousel .panels > a:nth-child(even) {
      background-color: lightskyblue;
    }

    .carousel .panels > a:nth-child(odd) {
      background-color: lightpink;
    }

    .carousel .arrow {
      position: absolute;
      top: 50%;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      background: rgba(31,45,61,.11);
      opacity: 0;
      transition: all .3s;
      outline: none;
      cursor: pointer;
    }

    .carousel .arrow-pre {
      left: 10px;
      transform: translateX(-10px) translateY(-50%);
    }

    .carousel:hover .arrow-pre {
      transform: translateX(0) translateY(-50%);
      opacity: 1;
    }

    .carousel .arrow-next {
      right: 10px;
      transform: translateX(10px) translateY(-50%);
    }

    .carousel:hover .arrow-next {
      transform: translateX(0) translateY(-50%);
      opacity: 1;
    }


    .carousel .arrow::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      border-left: 1px solid #fff;
      border-top: 1px solid #fff;
      transform: rotate(-45deg);
    }

    .carousel .arrow.arrow-next::before {
      transform: rotate(135deg);
    }

    .carousel .indicators {
      position: absolute;
      z-index: 100;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .carousel .indicators > li {
      display: inline-block;
      padding: 5px 0;
      cursor: pointer;
    }
    .carousel .indicators > li::before {
      content: '';
      display: block;
      width: 30px;
      height: 2px;
      border-radius: 2px;
      background: #c0c4cc;
      transition: all .3s;
    }

    .carousel .indicators > li.active::before{
      background: #fff;
    }